<template>
  <div>
    num{{ num }}<br />
    price{{ price.num }}<br />
    total{{ total }}
    <button @click="add">+</button><br />
    {{total1}}<br />

    姓<input type="text" v-model="xin"><br />
    名<input type="text" v-model="min"><br />
    姓名:{{xinmin}}
  </div>
  <button @click="login">我也要登录</button>

  <LoginVue :judges="judge" :title="title"
  @queding="queding" @quxiao="quxiao"
  >
    <template #no4>
      <p>这是我的page1插槽一传递的值</p>
    </template>
     <template #no5>
      <p>这是我的page1插槽二传递的值</p>
    </template>
     <template #no6>
      <p>这是我的page1插槽三传递的值</p>
    </template>
  </LoginVue>
</template>

<script setup>
import LoginVue from '../views/Login.vue'
import { ref, reactive, watch, watchEffect,computed} from "vue";
let num = ref(1);
let total = ref("");
let xin = ref("")
let min = ref("")
let price = reactive({
  num: 10,
});
let xinmin = computed(()=>{
  return xin.value+min.value
})
let add = () => {
  num.value++;
  price.num++;
};
let total1 = computed(()=>{//vue3的计算属性
  return num.value*price.num
})
// watch([num,price],()=>{//watch监听
//   console.log("num",num);
//   console.log("price",price.num);
//   total.value= num.value*price.num
// },{deep:true,immediate:true})
watchEffect(()=>{
  console.log("执行了");
  total.value = num.value*price.num
})


let judge = ref(false)//组件的唤起和传值
let title = ref("这是我page里面title传的值")

let login = ()=>{
  judge.value=true
}
let queding = ()=>{
  alert("欢迎进入菜单一")
  judge.value=false
}
let quxiao = ()=>{
  judge.value=false
}
// let queding = ()=>{
//   alert("欢迎进入菜单三")
//   judge.value=false
// }
// let quxiao = ()=>{
//   judge.value=false
// }
</script>

<style>
</style>